<template>
  <!-- 基础配置页面 -->

  <div>
    <div class="baseConfig">
      <div>
        <el-button type="primary" @click="baseConfigadd" size="mini">新增</el-button>
      </div><br>
      <div class="header">
        <el-table :data="baseConfigData" size="mini">
          <!-- 序号 -->
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <!-- 名称 -->
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <!-- 值 -->
          <el-table-column label="值">
            <template slot-scope="scope">
              <el-image v-if="judgeHandler(scope.row.val)==true" style="width: 40px; height: 40px" :src="scope.row.val"
                :preview-src-list="[scope.row.val]">
              </el-image>

              <input v-else type="text" style="border:none" readonly :value="scope.row.val">
            </template>
          </el-table-column>
          <!-- 介绍 -->
          <el-table-column prop="introduce" label="介绍">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="baseConfigdict(scope.row)" style="color:#30b08f" size="small">编辑
              </el-button>
              <el-button type="text" @click="baseConfigdelete(scope.row)" style="color:rgb(230, 93, 110)" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 模态框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="baseform" ref="base_form">
          <!-- <el-form-item label="ID" v-if="title=='新增'">
              <el-input v-model="baseform.id" autocomplete="off"></el-input>
            </el-form-item> -->
          <!-- 名称 -->
          <el-form-item label="名称">
            <el-input v-model="baseform.name" autocomplete="off"></el-input>
          </el-form-item>
          <!-- 介绍 -->
          <el-form-item label="介绍">
            <el-input v-model="baseform.introduce" autocomplete="off"></el-input>
          </el-form-item>
          <!-- 分类 -->
          <el-form-item label="类型">
            <el-select v-model="baseform.region" placeholder="请选择上传类型">
              <el-option label="文字" value="文字"></el-option>
              <el-option label="图片" value="图片"></el-option>
            </el-select>
          </el-form-item>
          <!-- 值 -->
          <el-form-item label="值">
            <el-input v-if="baseform.region =='文字'" v-model="baseform.val" autocomplete="off"></el-input>
            <el-upload v-else class="avatar-uploader" :action="uploadFileURL" :show-file-list="false"
              :on-success="handleSuccess" :before-upload="beforeUpload">
              <img v-if="imageUrl" :src="baseform.val" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
  import {
    get,
    post
  } from "@/utils/request";
  import {
    mapActions,
    mapState
  } from "vuex";
  import {
    showFileURL,
    uploadFileURL
  } from '@/utils/config'

  export default {
    data() {
      return {
        baseform: {
          name: "",
          introduce: "",
          region: "",
          val: "",
          id: "",
        },
        rules: {
          // 产品名称
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          // 产品介绍
          introduce: [{
            required: true,
            message: '请输入产品介绍',
            trigger: 'blur'
          }],
          // 类型
          region: [{
              required: true,
              message: '请选择类',
              trigger: 'change'
            },

          ],
          // 图片
          val: [{
            required: true,
            message: '请选择图片',
            trigger: 'change'
          }],
        },
        title: "",
        pageSize: 8,
        currentPage: 1,
        imageUrl: '',
        uploadFileURL,
        dialogFormVisible: false,
        uploadFileURL,
        total: 10,
      };
    },
    computed: {
      ...mapState("baseConfig", ["baseConfigData"]),
    },
    methods: {
      ...mapActions("baseConfig", ["getAllbaseConfigData"]),

      //新增数据
      baseConfigadd() {
        this.baseform = {
          name: "",
          introduce: "",
          region: "",
          val: "",
        };
        this.title = "新增";
        this.dialogFormVisible = true;

      },

      //上传更新数据 
      submitForm() {
        this.$refs['base_form'].validate(async (valid) => {
          if (valid) {
            // 发送表单验证的请求 提交表单对象
            let res = await post('/baseConfig/saveOrUpdate', this.baseform)
            // 给用户一个成功的提示
            if (res.status == 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              // 重新刷新页面的数据
              this.getAllbaseConfigData();
              // 调用关闭模态框的方法
              this.dialogClose()
            } else {
              this.$message.error(res.message);
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //关闭模态框
      dialogClose() {
        // 重置表单
        this.$refs['base_form'].resetFields();
        // 关闭模态框
        setTimeout(() => {
          this.dialogFormVisible = false;
        }, 200);
      },
      //设置图片大小不能超过 3MB
      beforeUpload(file) {
        const isLt3M = file.size / 1024 / 1024 < 3;
        if (!isLt3M) {
          this.$message.error('上传头像图片大小不能超过 3MB!');
        }
      },
      // 成功上传图片
      handleSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // 上传成功之后 更新productForm.photo的路径
        this.baseform.val = showFileURL + res.data.id
      },
      // 编辑数据
      baseConfigdict(row) {

        this.baseform.id = row.id;
        this.baseform.name = row.name;
        this.baseform.val = row.val;
        this.baseform.introduce = row.introduce;
        if (this.judgeHandler(row.val) == true) {
          this.baseform.region = "图片"
        } else {
          this.baseform.region = "文字"
        }
        this.imageUrl = this.baseform.val;
        this.title = "编辑";
        this.dialogFormVisible = true;
      },


      //删除数据
      async baseConfigdelete(row) {
        console.log(row.id);
        let res = await get('/baseConfig/deleteById', {
          id: row.id
        })
        console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          // 重新刷新页面的数据
          this.getAllbaseConfigData();
          // 调用关闭模态框的方法
          this.dialogClose()
        } else {
          this.$message.error(res.message);
        }
      },


      //刷新页面
      handleSizeChange(val) {
        // 将每页要展示的数据的条数 进行一个更新
        this.pageSize = val;
        // 将当前的页数 重置到第一页
        this.currentPage = 1;
        // 重新调用获取所有产品数据的方法
        this.getAllProductData();
      },
      //将当前页数 与 分页插件动态点击控制的页数相绑定

      // //从接口获取数据
      //  async getAllProductData() {
      //   // 获取参数
      //   let data = {
      //     page: this.currentPage,
      //     pageSize: this.pageSize,
      //   };
      //   // 通过对应的参数发送网络请求 获取产品数组数据
      //    let res = await get("/baseConfig/findAll", { ...data, ...this.queryData });


      // },


      //判断val是否是图片地址还是文字
      judgeHandler(val) {
        var bool;
        var sub = val.substring(val.lastIndexOf(".") + 1, val.length);
        if (sub === "jpg" || sub === "jpeg" || sub === "png" || sub == "gif") {
          bool = true;
        } else {
          bool = false;
        }
        return bool;
      },
      //
      FinebaseConfigData() {


        this.getAllbaseConfigData();

      },
    },
    created() {
      //激活函数
      this.getAllbaseConfigData();
    },
    mounted() {},
  };

</script>
<style scoped>
</style>
